<template>
    <div class="container">
        <div class="personinfo">
            <div class="headerInfo">
                <div>
                    <el-link type="primary">编辑信息</el-link>
                </div>
                <div class="avatar">
                    <img v-if="userinfo.image" :src="userinfo.image">
                    <img v-else src="@/assets/3.jpg">
                    <div>
                        <h3 v-if="userinfo.username" style="text-align: center;">{{userinfo.username}}</h3>
                    </div>
                </div>
                <div class="content">
                    <div style="text-align: center; width: 100%;">
                        <span style="font-size: 20px;">个性签名：</span>
                        <span v-if="userinfo.introduce">{{userinfo.introduce}}</span>
                    </div>
                    <div class="detialinfo" style="margin-top: 20px;">
                        <ul>
                            <li>
                                <span>地区：</span><span v-if="userinfo.address">
                                {{ userinfo.address }}</span></li>
                            <li><span>性别：</span><span v-if="userinfo.sex==0">女</span> 
                                <span v-else>男</span></li>
                            <li>
                                <span>邮箱：</span><span v-if="userinfo.email">{{userinfo.email}}</span>
                            </li>
                            <li><span>电话：</span><span v-if="userinfo.phone">{{userinfo.phone}}</span></li>
                            <li><span>创建时间：</span>
                                <span v-if="userinfo.createTime">{{userinfo.createTime}}</span>
                            </li>
                            <li><span>更新时间：</span>
                                <span v-if="userinfo.updateTime">{{userinfo.updateTime
                                
                                }}</span>
                            </li>
                        </ul>
                    </div>
                    <div class="linkness">
                        <div class="title1">
                            <p>23</p>
                            <p>文章</p>
                        </div>
                        <div class="title2">
                            <p>34</p>
                            <p>评论</p>
                        </div>
                        <div class="title3">
                            <p>23</p>
                            <p>收藏</p>
                        </div>
                    </div>
                    <div style="text-align: center; margin-top: 20px;">
                        <span class="iconfont icon-github" style="font-size: 20px;"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            userinfo:JSON.parse(localStorage.getItem('honey-user') || '{}'),
        }
    }
}
</script>

<style lang="less" scoped>
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
li{
    text-align: none;
}
.personinfo{
    width: 460px;
    height: 640px;
    background-color: #eee;
    .headerInfo{
        position: relative;
        height: 40%;
        .avatar{
            position: absolute;
            height: 100px;
            width: 100px;
            border-radius: 50%;
            left: 50%;
            transform: translateX(-50%);
            top:20px;
            img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }
        .content{
            // margin: 0 45px;
            position: absolute;
            top:185px;
            .detialinfo ul{
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                li{
                    width: 100%;
                    height: 40px;
                    text-align: center;
                }
            }
            .linkness{
                display: flex;
                margin: 0 75px;
                justify-content:space-around;
                div{
                    padding: 0 30px;
                }
                .title1{
                    width: 33%;
                    border-right: 1px solid black;
                }
                .title2{
                    width: 33%;
                    border-right: 1px solid black;
                }
                .title3{
                    width: 33%;
                }
            }
        }
    }
}

</style>